<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统主页</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

        .user-info h1 {
            color: #333;
            margin: 0;
        }

        .logout-btn {
            padding: 10px 20px;
            background-color: #dc3545;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        .logout-btn:hover {
            background-color: #c82333;
        }

        .content {
            margin-top: 30px;
        }

        .btn {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin-right: 10px;
            text-decoration: none;
            display: inline-block;
        }

        .btn:hover {
            background-color: #0056b3;
        }

        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 4px;
            border-left: 4px solid #007bff;
        }

        .welcome-info {
            background-color: #d4edda;
            border-color: #c3e6cb;
            color: #155724;
            padding: 15px;
            border-radius: 4px;
            margin-top: 20px;
        }

        .error-info {
            background-color: #f8d7da;
            border-color: #f5c6cb;
            color: #721c24;
            padding: 15px;
            border-radius: 4px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <div class="user-info">
            <h1>系统主页</h1>
            <p>欢迎使用本系统</p>
        </div>
        <button class="logout-btn" onclick="logout()">退出登录</button>
    </div>

    <div class="content">
        <h2>功能导航</h2>
        <a href="/login" class="btn">登录页面</a>
        <a href="/users.html" class="btn">用户管理</a>
        <a href="/profile.html" class="btn">个人资料</a>

        <div class="result">
            <h3>系统信息:</h3>
            <p>这是一个受保护的页面，只有登录用户才能访问。</p>
            <p>如果您看到这个页面，说明您已经成功登录。</p>
        </div>

        <div id="userInfoContainer">
            <div class="text-center">
                <div class="spinner-border" role="status">
                    <span class="visually-hidden">加载中...</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 页面加载时获取当前用户信息
    document.addEventListener('DOMContentLoaded', function () {
        fetch('/api/user/info', {
            credentials: 'same-origin'
        })
            .then(response => {
                // 检查响应状态
                if (response.status === 200) {
                    return response.json();
                } else if (response.status === 401 || response.status === 302) {
                    // 未认证或重定向，跳转到登录页面
                    window.location.href = '/login';
                    return null;
                } else {
                    throw new Error('HTTP error! status: ' + response.status);
                }
            })
            .then(data => {
                if (data && data.success && data.data) {
                    displayUserInfo(data.data);
                } else if (data === null) {
                    // 已经跳转到登录页面，无需处理
                    return;
                } else {
                    displayError('获取用户信息失败');
                }
            })
            .catch(error => {
                console.error('获取用户信息失败:', error);
                // 如果是解析错误，可能是因为重定向到了登录页面
                if (error.message.includes('Unexpected token') || error.message.includes('not valid JSON')) {
                    window.location.href = '/login';
                } else {
                    displayError('获取用户信息失败: ' + error.message);
                }
            });
    });

    function displayUserInfo(user) {
        const container = document.getElementById('userInfoContainer');
        container.innerHTML = `
            <div class="welcome-info">
                <h4>当前用户信息</h4>
                <p>用户名: <strong>${user.username}</strong></p>
                <p>用户ID: <strong>${user.id}</strong></p>
                <p>邮箱: <strong>${user.email || '未设置'}</strong></p>
            </div>
        `;
    }

    function displayError(message) {
        const container = document.getElementById('userInfoContainer');
        container.innerHTML = `
            <div class="error-info">
                <h4>错误信息</h4>
                <p>${message}</p>
            </div>
        `;
    }

    function logout() {
        fetch('/api/logout', {
            method: 'POST',
            credentials: 'same-origin'
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 登出成功，跳转到登录页面
                    window.location.href = '/login';
                } else {
                    // 即使失败也跳转到登录页面
                    window.location.href = '/login';
                }
            })
            .catch(error => {
                console.error('登出失败:', error);
                // 即使失败也跳转到登录页面
                window.location.href = '/login';
            });
    }
</script>
</body>
</html>
